* {
  margin: 0;
  padding: 0;
}

// 溢出文本省略效果
.text-hidden {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// 自定义类
.cl-blue {
  color: #409EFF;
}

//图片自适应
.img-auto {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

// 分页居中
.el-pagination {
  text-align: center;
}

// a 标签去下划线
a {
  text-decoration: none;
  color: black;
}

// 去小黑点
ul {
  list-style: none;
}

//time 标签默认样式
time {
  color: gray;
  font-size: 14px;
}

//播放图标
.el-icon-video-play {
  display: none;
  color: white;
  float: right;
  font-size:200%;

  &:hover {
    transform: scale(1.2);
  }
}

#home {
  margin: 0 auto;
  width: 1060px;
}

.home-body{
  // 精选歌单,热门榜单
  .first-column {
    height: 440px;
  }

  // 精选歌单,热门榜单 标题链接
  .music-label-nav {
    display: inline-block;
    padding-top: 40px;
    padding-bottom: 20px;
    font-size: 30px;
    font-weight: normal;

    span:first-child {
      color: #409EFF;
    }

    .link-song {
      margin-left: 520px;
    }

    .link-list {
      margin-left: 160px;
    }
  }

  //热门榜单标题链接
  .music-label-nav:nth-of-type(2) {
    margin-left: 40px;
  }
}

//装载音乐标签的盒子
.music-label-box {
  position: absolute;

  //存放小音乐标签的盒子
  &>div:nth-child(2) {
    position: absolute;
    left: 360px;
    width: 330px;
    height: 330px;
  }

  //音乐标签共同的样式
  .music-label {
    a {
      display: inline-block;
      color: white;
      background-color: transparent;
      z-index: 20;

      * {
        border-radius: 4px;
      }

      //播放图标，歌曲介绍.作者
      i, .music-info {
        padding: 4px;
        background-color: rgba(gray, 0.6);
      }

      .music-info {
        p {
          margin: 0;
          margin-bottom: 4px;
        }
      }
    }

    a:hover {
      background-color: rgba(#C0C4CC, 0.5);
    }

    //当鼠标悬停在图片上时，显示播放按钮
    a:hover .el-icon-video-play{
      display: inline;
    }
  }

  .music-label-big, .music-label-big a {
    position: absolute;
    left: 0;
    width: 330px;
    height: 330px;
    background-color: gainsboro;
  }

  //大的音乐标签
  .music-label-big {
    // 链接
    a {
      background-color: transparent;

      //歌曲介绍.作者
      .music-info {
        margin-top: 252px;
      }

      .music-info {
        div {
          display: inline-block;
          width: 260px;
        }
      }
    }
  }

  //小的音乐标签, 标签链接
  .music-label-small, .music-label-small a {
    left: 0;
    width: 160px;
    height: 160px;
    background-color: gainsboro;
  }

  //标签链接
  .music-label-small a {
    position: absolute;
  }

  .music-label-small {
    position: relative;
    float: left;

    &:nth-child(2) {
      margin-left: 10px;
    }

    &:nth-child(3) {
      margin-top: 10px;
    }

    &:nth-child(4) {
      margin-top: 10px;
      margin-left: 10px;
    }

    // 链接
    a {
      background-color: transparent;

      //歌曲介绍.作者
      .music-info {
        margin-top: 83px;
      }

      .music-info {
        div {
          display: inline-block;
          width: 100px;
        }
      }
    }
  }
}

//热门榜单
.hot {
  margin-left: 730px;

  //榜单中的一栏，每一栏都是一个链接
  &>a {
    position: absolute;
    width: 330px;

    &:nth-child(2) {
      margin-top: 115px;
    }

    &:nth-child(3) {
      top: 230px;
    }

    &:hover {
      a {
        background-color: rgba(#C0C4CC, 0.5);
      }

      .el-icon-video-play {
        display: inline;
      }
    }
  }

  //榜单名称及相关歌曲,作者 区域
  .hot-text {
    display: inline-block;
    box-sizing: border-box;
    margin-left: 100px;
    padding-top: 8px;
    padding-left: 8px;
    width: 200px;
    height: 100px;
    background-color: #DCDFE6;

    p:first-of-type {
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }

  //榜单图片，图片链接
  .el-image, a>a {
    position: absolute;
    left: 0;
  }

  //榜单图片链接
  a>a {
    display: inline-block;
    width: 100px;
    height: 100px;
    z-index: 20;

    //播放按钮
    .el-icon-video-play {
      margin-top: 35px;
      margin-right: 35px;
    }
  }

  //链接导航 icon: '>'
  .el-icon-arrow-right {
    float: right;
    width: 30px;
    height: 100px;
    line-height: 100px;
    color: gray;
    background-color: #DCDFE6;
    font-size: 200%;
  }
}

//囊括新歌首发，推荐MV的 最外层div
.second-column {
  //新歌首发栏
  div:first-child {
    display: inline-block;
    width: 690px;
  }

  //'新歌首发'后的 语种歌曲标签
  .music-label-nav~span {
    margin-left: 20px;
    cursor: pointer;

    &:hover {
      color: #409EFF;
    }
  }

  // 右实心箭头图标大小
  .el-icon-caret-right {
    font-size: 130%;
  }

  //全部播放按钮
  .el-button {
    float: right;
    margin-top: 50px;
    padding: 8px 10px;
  }

  //分割线
  .el-divider {
    margin-bottom: 20px;
  }

  //华语，欧美，韩国，日本 相对应语种歌曲列表
  li {
    a {
      display: inline-block;
      padding: 8px;
      width: 674px;
      height: 20px;
    }

    a:hover {
      color: #409EFF;
      background-color: #F2F6FC;

      .el-icon-caret-right {
        display: inline;
      }
    }

    a:hover time {
      color: #409EFF;
    }

    time, .el-icon-caret-right {
      float: right;
    }

    .el-icon-caret-right {
      display: none;
      margin-right: 10px;
      color: #606266;

      &:hover {
        color: #409EFF;
      }
    }
  }

  //推荐mv栏
  div:nth-child(2) {
    float: right;
    width: 330px;
    //background-color: lightgrey;
  }

  .mv {
    .el-icon-video-play {
      font-size: 300%;
    }

    a {
      position: absolute;
      display: inline-block;
      left: 0;
    }

    a:hover {
      background-color: rgba(#C0C4CC, 0.5);
    }

    a:hover .el-icon-video-play{
      display: inline;
    }
  }

  //大的 mv 图片标签
  .mv-big {
    position: absolute;
    height: 190px;

    a {
      width: 330px;
      height: 190px;
    }

    .el-icon-video-play {
      margin-top: 70px;
      margin-right: 140px;
    }

    .mv-info {
      position: relative;
      bottom: 62px;
      padding: 8px;
      width: 314px;
      color: white;
      background-color: rgba(gray, 0.6);
    }
  }

  .mv-small {
    position: absolute;
    margin-top: 200px;
    width: 160px;
    height: 80px;

    &:nth-of-type(2) {
      margin-left: 170px;
    }

    a {
      position: absolute;
      display: inline-block;
      left: 0;
      width: 160px;
      height: 80px;

      &:hover {
        background-color: rgba(gray, 0.6);
      }

      &:hover .el-icon-video-play {
        display: inline;
      }
    }

    .el-icon-video-play {
      margin-top: 30px;
      margin-right: 65px;
    }

    address {
      color: gray;
      font-size: 14px;
    }
  }
}

//热门电台，热门歌手 栏
.third-column {
  &>div:first-child {
    display: inline-block;
    width: 690px;

  }

  //电台图片列表
  ul {
    width: 690px;

    li {
      position: relative;
      float: left;
      width: 100px;
      height: 130px;
      cursor: pointer;
      //background-color: #409EFF;
      text-align: center;

      &:hover {
        color: #409EFF;
      }

      //出第一 li 标签外的所有 li 标签
      &:nth-child(n + 2) {
        margin-left: 47px;
      }

      //第二排的 li 标签
      &:nth-child(n + 6) {
        margin-top: 30px;
      }

      //第六个 li 标签，即第二排的首个标签
      &:nth-child(6) {
        margin-left: 0;
      }

      &>div,a {
        position: absolute;
        width: 100px;
        height: 100px;
      }

      &>div {
        bottom: 30px;
      }
    }

    //电台名称
    li>span {
      display: inline-block;
      margin-top: 110px;

      &:hover+div  {
        a {
          background-color: rgba(gray, 0.6);
        }

        .el-icon-video-play {
          display: inline-block;
        }
      }
    }

    li a {
      border-radius: 50px;
      z-index: 20;

      &:hover {
        background-color: rgba(gray, 0.6);
      }

      &:hover .el-icon-video-play {
        display: inline;
      }

      .el-icon-video-play {
        margin-top: 36px;
        margin-right: 32px;
      }
    }

  }
}

//热门歌手栏
.hot-sg {
  float: right;
  width: 330px;
  //background-color: lightgrey;

  &>span {
    margin: 0 5px;
    cursor: pointer;

    &:hover {
      color: #409EFF;
    }
  }

  &>span+a {
    float: right;
    margin-top: 57px;
  }
}

//热门歌手图片展示及链接
.hot-sgc {
  .el-image {
    cursor: pointer;

    &:hover {
      transform: scale(1.02);
    }
  }
  
  //前两张,即第一排的图片
  .el-image:first-child,.el-image:nth-child(2) {
    width: 160px;
    height: 160px;
  }

  //第两张
  .el-image:nth-child(2) {
    margin-left: 10px;
  }

  //除前两张 ,即第二排的图片
  .el-image:nth-child(n+3) {
    margin-top: 8px;
    width: 105px;
    height: 105px;
  }

  .el-image:nth-child(n+4) {
    margin-left: 7px;
  }
}